<template>
    <el-card>
        <template #header>
            <h3>意见反馈</h3>
        </template>
        <!-- 搜索区域 -->
        <el-form inline>
            <el-form-item label="居民" style="width: 200px">
                <el-input v-model="params.resident"></el-input>
            </el-form-item>
            <el-form-item label="内容" style="width: 200px">
                <el-input v-model="params.content"></el-input>
            </el-form-item>
            <el-form-item label="时间" style="width: 200px">
                <el-date-picker v-model="params.date" type="date" placeholder="选择日期" style="width: 200px"
                    value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="params.status" placeholder="" style="width: 100px">
                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchOpinions()">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格区域 -->
        <el-table :data="opinions" border @sort-change="handleSortChange">
            <el-table-column label="时间" prop="time" sortable="custom" align="center" width="180">
                <template #default="scope">
                    <span v-text="scope.row.time.substring(0, 10) + ' ' + scope.row.time.substring(11, 19)">
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="居民" prop="name" sortable="custom" align="center" width="100"></el-table-column>
            <el-table-column label="内容" prop="content" align="center" width=""></el-table-column>
            <el-table-column label="状态" prop="status" sortable="custom" align="center" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0">待处理</el-tag>
                    <el-tag v-else-if="scope.row.status == 1" type="success">正在处理</el-tag>
                    <el-tag v-else-if="scope.row.status == 2" type="warning">处理完成</el-tag>
                    <el-tag v-else-if="scope.row.status == 3" type="danger">已忽略</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template #default="scope">
                    <div class="opinion">
                        <span>
                            <!-- 退回确认气泡 -->
                            <el-popconfirm width="250" icon-color="#626AEF" title="确认忽略该条反馈吗？">
                                <template #reference>
                                    <el-button type="danger">忽略</el-button>
                                </template>
                                <template #actions="{ confirm, cancel }">
                                    <el-button size="small" @click.once="cancel">取消</el-button>
                                    <el-button type="danger" size="small"
                                        @click.once="callbackOpinion(scope.row, confirm)">
                                        确认
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </span>
                        <span class="confirm">
                            <el-button v-if="scope.row.status == 0" type="success"
                                @click="scope.row.statusParam = 1, confirmOpinion(scope.row)">
                                开始处理
                            </el-button>
                            <el-button v-if="scope.row.status == 1" type="success"
                                @click="scope.row.statusParam = 2, confirmOpinion(scope.row)">
                                处理完成
                            </el-button>
                        </span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
            background layout="total, prev, pager, next" :total="params.total" @current-change="handleCurrentChange" />
    </el-card>
</template>
<script>
import { ElMessage } from 'element-plus';
import { opinionFindAPI, opinionStatusUpdateAPI } from '@/api/opinion';
export default {
    data() {
        return {
            params: {
                // 搜索关键词
                resident: '',
                content: '',
                date: '',
                status: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            opinions: [],
            healthInstitutions: [],
            statusOptions: [
                {
                    value: '',
                    label: ''
                },
                {
                    value: '0',
                    label: '待处理'
                },
                {
                    value: '1',
                    label: '正在处理'
                },
                {
                    value: '2',
                    label: '处理完成'
                },
                {
                    value: '3',
                    label: '忽略'
                }
            ]
        }
    },
    methods: {
        handleCurrentChange(page) {
            this.params.currentPage = page;
            this.loadOpinionsList();
        },
        searchOpinions() {
            this.handleCurrentChange(1);
        },
        loadOpinionsList() {
            opinionFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.opinions = resp.data.datas;
                    this.params.total = resp.data.total;

                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        opinionsStatusUpdate(row, confirm) {
            opinionStatusUpdateAPI(row).then((resp) => {
                if (resp.data.code == 2000) {
                    this.loadOpinionsList();
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        callbackOpinion(row, confirm) {
            row.statusParam = 3;
            opinionStatusUpdateAPI(row).then((resp) => {
                if (resp.data.code == 2000) {
                    this.loadOpinionsList();
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
            if (confirm) {
                confirm();
            }
        },
        confirmOpinion(row, confirm) {
            this.opinionsStatusUpdate(row);
        },
        handleSortChange({ prop, order }) {
            if (order) {
                // 根据 prop 和 order 进行排序
                this.params.sortProp = prop;
                this.params.sortOrder = order === 'ascending' ? 'asc' : 'desc';
                this.loadOpinionsList();
            } else {
                // 清除排序
                delete this.params.sortProp;
                delete this.params.sortOrder;
                this.loadOpinionsList();
            }
        }
    },
    created() {
        this.loadOpinionsList();
    }
}
</script>

<style scoped>
.example-pagination-block {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-pagination {
    margin: 20px 0 0 450px;
    align-items: center;
}

.description {
    margin: 0px 15px;
}

.opinion {
    display: flex;
    align-items: center;
}

.opinion .confirm {
    margin-left: 10px;
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>